<div class="dux-page-header am-cf">
    <div class="page-title">
        <a class="am-btn am-btn-primary" href="{url('index')}"> 分组列表</a>
    </div>
    <div class="page-action">
        <a class="am-btn am-btn-danger" href="javascript:location.reload();"><i class="am-icon-refresh"></i></a>
    </div>
</div>

<div class="dux-body">
    <div class="am-panel am-panel-default dux-panel">
        <div class="am-panel-hd">{$assignName}分组</div>
        <div class="am-panel-bd">
            <form class="am-form  am-form-horizontal dux-form" data-dux="form-bind" method="post">
                <fieldset>
                    <div class="am-form-group">
                        <label class="am-u-md-2 am-u-sm-12 am-form-label">分组名称</label>
                        <div class="am-u-md-10 am-u-sm-12">
                            <input type="text" name="name" value="{$info.name}" placeholder="请输入分组名称" required>
                        </div>
                    </div>

                    <div class="am-form-group">
                        <label class="am-u-md-2 am-u-sm-12 am-form-label">分组规格</label>
                        <div class="am-u-md-10 am-u-sm-12">
                            <button class="am-btn am-btn-primary" type="button" id="add">添加规格</button>
                            <p class="am-margin-top"></p>
                            <table class="am-table dux-table " data-table>
                                <thead>
                                <tr>
                                    <th>规格</th>
                                    <th class="am-text-center" width="180">操作</th>
                                </tr>
                                </thead>
                                <tbody id="spec-list">
                                    <!--loop{(array)$specList as $vo}-->
                                    <tr>
                                        <td data-id="{$vo.spec_id}">{$vo.name}
                                            <input type="hidden" name="spec_ids[]" value="{$vo.spec_id}"></td>
                                        <td>
                                            <button class="am-btn am-btn-primary am-btn-xs js-up" type="button">上移</button>
                                            <button class="am-btn am-btn-primary am-btn-xs js-down" type="button">下移</button>
                                            <button class="am-btn am-btn-danger am-btn-xs js-del" type="button">删除</button>
                                        </td>
                                    </tr>
                                    <!--{/loop}-->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="am-form-group">
                        <div class="am-u-sm-offset-12 am-u-md-offset-2">
                            <input type="hidden" name="group_id" value="{$info.group_id}">
                            <button class="am-btn am-btn-primary" type="submit" disabled>保存</button>
                        </div>
                    </div>

                </fieldset>
            </form>
        </div>
    </div>
</div>
<script id="tpl-spec" type="text/html">
    <tr>
        <td data-id="{{ d.spec_id }}">{{ d.name }}
            <input type="hidden" name="spec_ids[]" value="{{ d.spec_id }}"></td>
        <td>
            <button class="am-btn am-btn-primary am-btn-xs js-up" type="button">上移</button>
            <button class="am-btn am-btn-primary am-btn-xs js-down" type="button">下移</button>
            <button class="am-btn am-btn-danger am-btn-xs js-del" type="button">删除</button>
        </td>
    </tr>
</script>

<script>
    Do('base', 'dialog', 'tpl', function() {
        window.addSpec = function(data) {
            var gettpl = $('#tpl-spec').html();

            $.each(data, function(key, value) {
                if($('[data-id="' + value.spec_id + '"]').length > 0) {
                    notify.warning({
                        content : '该规格已添加'
                    });

                }else {
                    laytpl(gettpl).render(value, function(html){
                        $('#spec-list').append(html);
                    });
                }
            });
        };
        $('#add').click(function() {
            layer.open({
                type: 2,
                title: '添加规格',
                shadeClose: true,
                shade: 0.8,
                area: ['640px', '470px'],
                content: '{url("dialog")}'
            });
        });
        $('#spec-list').on('click','.js-up', function () {
            var $tr = $(this).parents("tr");
            if ($tr["index"]() != 0) {
                $tr["prev"]().before($tr);
            }
        });
        $('#spec-list').on('click','.js-down', function () {
            var trLength = $(this).parents('table').find(".js-down").length;
            var $tr = $(this).parents("tr");
            if ($tr["index"]() != trLength - 1) {
                $tr["next"]().after($tr);
            }
        })
        $('#spec-list').on('click','.js-del',function(){
            $(this).parents('tr').remove();
        });

    });
</script>